<template>
  <div class="m-pageView">
    <div class="continer m-dataLayout">
      <div class="m-searchListPanel">
        <div class="layout-1"><span class="leftLine"></span>分配存取栏位</div>
      </div>
      <el-form :inline="true">
        <el-row>
          <el-form-item label="角色名称"><el-input v-model="roleName" readonly></el-input></el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="功能类型"><el-input v-model="featureType" readonly></el-input></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据类型"><el-input v-model="dataType" readonly></el-input></el-form-item>
          </el-col>
        </el-row>
        <el-row class="m-transferBox">
          <el-transfer
            v-model="selectedFields"
            :titles="['允许存取栏位','拒绝存取栏位']"
            :data="dataFields"></el-transfer>
        </el-row>
        <el-row>
          <el-button @click="$router.go(-1)">取消</el-button>
          <el-button type="primary" @click="onFieldsUpdate">更新</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import * as roleAPI from "@/Api/role";
export default {
  name: "AssignFields",
  data() {
    return {
      roleName: "",
      roleId: "",
      featureType: "真实账号",
      dataType: "身份及联络资料",
      selectedFields: [],
      dataFields: [
        {
          key: "realName",
          label: "姓名"
        },
        {
          key: "nationality",
          label: "国籍"
        },
        {
          key: "birthdayStr",
          label: "出生日期"
        },
        {
          key: "paperType",
          label: "证明文件"
        },
        {
          key: "paperCountry",
          label: "签发国家"
        },
        {
          key: "paperNo",
          label: "证件号码"
        },
        {
          key: "phone",
          label: "手机号码"
        },
        {
          key: "otherPhone",
          label: "其他手机号码"
        },
        {
          key: "email",
          label: "电邮地址"
        },
        {
          key: "qq",
          label: "QQ"
        },
        {
          key: "wechat",
          label: "WeChat"
        }
      ]
    };
  },
  mounted() {
    this.roleName = this.$route.query.name;
    this.requestRole();
  },
  methods: {
    handleRequest(res) {
      return new Promise((resolve, reject) => {
        if (res.code == "0") resolve(res);
        else reject(res);
      });
    },
    handleRequestException(res) {
      if ("code" in res) {
        this.$message({
          type: "warning",
          message: `${res.code}: ${res.msg}`
        });
      } else {
        console.error(res);
        this.$message({
          type: "error",
          message: res
        });
      }
    },
    requestRole() {
      roleAPI
        .roleQuery({
          roleName: this.roleName
        })
        .then(this.handleRequest)
        .then(res => {
          this.roleId = res.data[0].id;
          this.requestCurrentFields();
        })
        .catch(this.handleRequestException);
    },
    requestCurrentFields() {
      roleAPI
        .roleFieldPermQuery({
          roleId: this.roleId
        })
        .then(this.handleRequest)
        .then(res => {
          this.selectedFields = res.data.split("|");
        })
        .catch(this.handleRequestException);
    },
    onFieldsUpdate() {
      roleAPI
        .roleUserFieldPerm({
          roleId: this.roleId,
          fields: this.selectedFields.join("|")
        })
        .then(this.handleRequest)
        .then(res => {
          this.$message.success(`已经成功为${this.roleName}更新存取栏位!`);
        })
        .catch(this.handleRequestException);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../scss/variables";
</style>
